<template>
  <!-- 指数 -->
  <div :class="['indice', { mobile: $isMobile }]">
    <div class="g-con">
      <div
        class="top"
        v-if="$isMobile"
      >
        {{ t('header.menu3') }}
      </div>

      <Banner bannerModel="5" />

      <div class="global-time mt-3">
        <div class="tit flexsc">{{ t('indice.t1') }}</div>
        <div class="list">
          <div
            class="item flexec"
            v-for="item in timeList"
          >
            <img :src="item.img" />
            <span class="mr-1">{{ item.name }}</span>
            <span>{{ item.time }}</span>
          </div>
        </div>
      </div>

      <div class="module-1 mt-4">
        <div class="g-title">
          <div class="text flexsc">{{ t('indice.t2') }}</div>
          <div class="flexec s">
            <el-date-picker
              v-model="searchData.updateTime"
              type="date"
              value-format="X"
              :placeholder="t('indice.p1')"
            />
            <div
              class="button"
              @click="getIndexData()"
            ></div>
          </div>
        </div>
        <div class="con mt-5">
          <div
            class="item"
            v-for="item in indexData"
          >
            <div class="a flexcc">{{ item.indexName }}</div>
            <div :class="['b', 'flexcc', item.changeValue > 0 ? 'red' : 'green']">
              <div class="mr-1">{{ item.indexValue }}</div>
              <img :src="item.changeValue > 0 ? shangzhang : xiajiang" />
            </div>
            <div :class="['c', 'mt-1', 'flexcc', item.changeValue > 0 ? 'red' : 'green']">
              <span class="mr-2">{{ item.changeValue > 0 ? '+' + item.changeValue : item.changeValue }}</span>
              <span>{{ item.riseFall > 0 ? '+' + item.riseFall : item.riseFall }}%</span>
            </div>
            <div class="table">
              <el-table
                :data="item.dataDetailsList"
                border
                scrollbar-always-on
                height="280"
                style="width: 100%"
              >
                <el-table-column
                  :prop="col.prop"
                  :label="col.label"
                  :key="ci"
                  align="center"
                  v-for="(col, ci) in item.columnData"
                  :width="col.width"
                >
                  <template #default="scope">
                    <template v-if="col.type === 1">
                      <div :class="scope.row[enum_val[col.prop]] > 0 ? 'red' : 'green'">
                        {{ scope.row[col.prop] }}
                      </div>
                    </template>
                    <template v-else-if="col.type === 2">
                      <div :class="[scope.row[col.prop] > 0 ? 'red' : 'green', 'flexcc']">
                        {{ scope.row[col.prop] }}
                        <img
                          v-if="scope.row[col.prop] !== null"
                          :src="scope.row[col.prop] > 0 ? shangzhang : xiajiang"
                          height="14"
                        />
                      </div>
                    </template>
                    <template v-else>
                      {{ scope.row[col.prop] }}
                    </template>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="d flexcc">
              {{ t('indice.updatetime') }}:
              {{ dateFormat(item.updateTime, 3) }}
            </div>
          </div>
        </div>
      </div>

      <div class="module-2 mt-6">
        <div class="g-title">
          <div class="text flexsc">{{ t('indice.t3') }}</div>
        </div>

        <div class="list mt-4">
          <div
            class="item"
            v-for="{ id, newsImage, newTitle, createTime, newContent, readingNum } in newsList"
            :key="id"
            @click="openUrl(`/detail`, { id })"
          >
            <img
              class="pic"
              :src="newsImage"
              alt=""
            />
            <div
              class="title line-2"
              :title="newTitle"
            >
              {{ newTitle }}
            </div>
            <div class="time">{{ dateFormat(createTime, 3) }}</div>
            <div class="text noscrollbar line-4">{{ toText(newContent, 120) }}</div>
            <div class="icon flexsc">
              <div class="flexsc mr-2">
                <img
                  src="@/assets/img/icon_yuedu.png"
                  alt=""
                />
                <div>{{ readingNum }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, watch, onUnmounted, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { getIndexDataApi } from '@/service/common'
import { getNewsListApi } from '@/service/news'
import { dateFormat, toText, openUrl } from '@/utils'
import moment from 'moment'

import shangzhang from '@/assets/img/icon_shangzhang.png'
import xiajiang from '@/assets/img/icon_xiajiang.png'

import Banner from '@/components/Banner.vue'
const { $isMobile } = getCurrentInstance().appContext.config.globalProperties

onBeforeMount(() => {
  init()
})
const { t, locale } = useI18n()
watch(locale, () => {
  init()
})

const router = useRouter()
const route = useRoute()

const formatDate = (dateString) => {
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = ('0' + (date.getMonth() + 1)).slice(-2)
  const day = ('0' + date.getDate()).slice(-2)
  const hours = ('0' + date.getHours()).slice(-2)
  const minutes = ('0' + date.getMinutes()).slice(-2)
  const seconds = ('0' + date.getSeconds()).slice(-2)
  const weekday = date.toLocaleDateString('zh-CN', { weekday: 'short' })

  // return `${year}-${month}-${day}  ${weekday} ${hours}:${minutes}:${seconds}`;
  return `${hours}:${minutes}`
}

//
const getGlobalTime = (timeZone) => {
  const options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', weekday: 'short' }
  const sydneyDate = new Date().toLocaleString('en-US', { timeZone, ...options })
  return formatDate(sydneyDate)
}
const timeList = ref([])
const getTimeList = () => {
  timeList.value = [
    {
      img: new URL('@/assets/img/lundun.png', import.meta.url),
      name: t('indice.g1'),
      time: getGlobalTime('Europe/London')
    },
    {
      img: new URL('@/assets/img/Athens.png', import.meta.url),
      name: t('indice.g2'),
      time: getGlobalTime('Europe/Athens')
    },
    {
      img: new URL('@/assets/img/DUBAI.png', import.meta.url),
      name: t('indice.g3'),
      time: getGlobalTime('Asia/Dubai')
    },
    {
      img: new URL('@/assets/img/beijing.png', import.meta.url),
      name: t('indice.g4'),
      time: getGlobalTime('Asia/Shanghai')
    },
    {
      img: new URL('@/assets/img/tokyo.png', import.meta.url),
      name: t('indice.g5'),
      time: getGlobalTime('Asia/Tokyo')
    },
    {
      img: new URL('@/assets/img/new york.png', import.meta.url),
      name: t('indice.g6'),
      time: getGlobalTime('America/New_York')
    }
  ]

  return getTimeList
}
let timer = setInterval(getTimeList(), 1000)
onUnmounted(() => {
  clearInterval(timer)
  timer = null
})

//
const searchData = ref({})

// 列
const getColumnData = (key) => {
  const obj = {
    // 波罗的海指数
    BDI: [
      {
        prop: 'detailName',
        label: t('indice.c1_1')
      },
      {
        prop: 'detailValue',
        label: t('indice.c1_2'),
        type: 1
      },
      {
        prop: 'detailRate',
        label: t('indice.c1_3'),
        type: 2
      }
    ],
    // 美元指数
    'US DOLLAR': [
      {
        prop: 'detailName',
        label: t('indice.c2_1')
      },
      {
        prop: 'detailValue',
        label: t('indice.c2_2'),
        type: 1
      },
      {
        prop: 'detailRate',
        label: t('indice.c1_3'),
        type: 2
      }
    ],
    // 纳斯达克指数
    NASDAQ: [
      {
        prop: 'detailName',
        label: t('indice.c3_1')
      },
      {
        prop: 'detailValue',
        label: t('indice.c1_2'),
        type: 1
      },
      {
        prop: 'detailRate',
        label: t('indice.c1_3'),
        type: 2
      }
    ],
    // 布伦特原油指数
    'BRENT CRUDE': [
      {
        prop: 'detailName',
        label: t('indice.c4_1'),
        width: 120
      },
      {
        prop: 'vlsfo',
        label: 'VLSFO',
        type: 1
      },
      {
        prop: 'vlsfoRiseFall',
        label: t('indice.c1_3'),
        type: 2,
        width: 110
      },
      {
        prop: 'ifo',
        label: 'IFO',
        type: 1
      },
      {
        prop: 'ifoRiseFall',
        label: t('indice.c1_3'),
        type: 2,
        width: 110
      },
      {
        prop: 'mgo',
        label: 'MGO',
        type: 1
      },
      {
        prop: 'mgoRiseFall',
        label: t('indice.c1_3'),
        type: 2,
        width: 110
      },
      {
        prop: 'lng',
        label: 'LNG',
        type: 1
      },
      {
        prop: 'lngRiseFall',
        label: t('indice.c1_3'),
        type: 2,
        width: 110
      }
    ]
  }
  return obj[key] || []
}
// 指数
const indexData = ref([])
const getIndexData = () => {
  getIndexDataApi(searchData.value).then(({ data }) => {
    data.forEach((item) => {
      item.columnData = getColumnData(item.indexName)
    })
    indexData.value = data
  })
}

// 对应涨跌幅 key
const enum_val = ref({
  detailValue: 'detailRate',
  vlsfo: 'vlsfoRiseFall',
  ifo: 'ifoRiseFall',
  mgo: 'mgoRiseFall',
  lng: 'lngRiseFall'
})

// 新闻列表
const newsList = ref([])
const page = ref({
  pageNum: 1, // 当前页码
  pageSize: 3 // 每页条数
})
const getNewList = () => {
  const params = { ...page.value, isIndex: '1' }
  getNewsListApi(params).then(({ rows }) => {
    newsList.value = rows
  })
}

//
const init = () => {
  getIndexData()
  getNewList()
}
</script>

<style scoped lang="scss">
.indice {
  hr {
    border: 0;
    border-top: 2px dashed #2f5895;
  }

  .global-time {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 30px;

    .tit {
      font-weight: bold;
      text-transform: uppercase;
    }

    .list {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 40px;

      .item {
        img {
          margin-right: 10px;
        }
      }
    }
  }

  .module-1 {
    :deep(.el-date-editor.el-input) {
      height: 44px;
      width: 280px;

      .el-input__wrapper {
        width: 100%;
        height: inherit;
      }
    }

    .button {
      background: #ca2a02 url('@/assets/img/icon_sousuo2.png') no-repeat center;
      width: 44px;
      height: 44px;
      border-radius: 0px 4px 4px 0px;
      cursor: pointer;
    }

    .con {
      display: grid;
      grid-template-columns: repeat(4, 300px);
      gap: 20px;

      .table {
        position: relative;
        left: -2px;
        width: calc(100% + 4px);
      }

      :deep(.el-table) {
        --el-table-border-color: #2f5895;
      }

      :deep(.el-table .cell) {
        padding: 0 5px;
      }
      :deep(.el-table__header .cell) {
        color: #252628;
      }

      .item {
        border: 1px solid #2f5895;
        overflow: hidden;

        .a {
          font-size: 24px;
          font-weight: bold;
          color: #252628;
          padding: 25px 0;
          border-bottom: 4px solid #2f5895;
        }

        .b {
          padding-top: 20px;

          > div {
            font-size: 28px;
          }
        }

        .c {
          padding: 0px 0 20px;
        }

        .d {
          padding: 10px 0;
        }

        .red {
          color: #ca2a02;
        }

        .green {
          color: #03c56c;
        }
      }
    }
  }

  .module-2 {
    .list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 31px;
      grid-row-gap: 20px;

      .item {
        padding: 20px;
        background: #f5f5f5;
        color: #6a6973;
        display: grid;
        grid-template-rows: 217px 40px 10px 67px 20px;
        align-content: space-between;
        cursor: pointer;
        height: 480px;

        .pic {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .title {
          color: var(--titleColor);
          font-weight: bold;
          font-size: 16px;
        }

        .time {
          font-size: 12px;
        }

        .text {
          font-size: 12px;
          line-height: 1.4;
        }

        .icon {
          img {
            height: 20px;
            margin-right: 3px;
          }
        }
      }
    }
  }

  &.mobile {
    .top {
      background: #252628;
      color: #fff;
      padding: 12px 20px;
      font-weight: bold;
    }

    .g-con {
      width: 100%;
      padding: 0;
    }

    .g-title {
      border: 0;
      display: block;

      .text {
        border-bottom: 2px solid #212121;
        padding-bottom: 20px;
      }
    }

    .global-time {
      display: block;
      padding: 10px;

      .list {
        margin-top: 20px;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;

        .item {
          justify-content: center;
        }
      }
    }

    .module-1 {
      padding: 10px;

      .s {
        margin-top: 20px;
      }

      :deep(.el-date-editor.el-input) {
        height: 44px;
        width: calc(100% - 44px);
      }

      .con {
        display: block;
        margin-top: 0px;

        .item {
          margin-bottom: 20px;
        }
      }
    }

    .module-2 {
      padding: 10px;

      .list {
        display: block;
        margin-top: 0px;

        .item {
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>
